@mixin button-type($color, $name) {
    @each $type in(solid, plain, text) {
        @if $type== solid {
            &.foxui-#{$type}-#{$name} {
                &:not(.is-disabled) {
                    background-color: $color;
                    border: $--border-width-base $--border-style-base $color;
                    color: $--color-white;

                    @include hover-focus-active() {
                        color: $--color-white;
                    }

                    @include hover-focus() {
                        background-color: mix($--color-white, $color, $--button-hover-tint-percent);
                        border-color: mix($--color-white, $color, $--button-hover-tint-percent);
                    }

                    @include active() {
                        background-color: mix($--color-black, $color, $--button-active-shade-percent);
                        border-color: mix($--color-black, $color, $--button-active-shade-percent);
                    }
                }

                &.is-disabled {
                    background-color: mix($--color-white, $color, 50%);
                    border-color: mix($--color-white, $color, 50%);
                    color: $--color-white;
                }
            }
        } @else if $type== plain {
            &.foxui-#{$type}-#{$name} {
                &:not(.is-disabled) {
                    background-color: mix($--color-white, $color, 90%);
                    border-color: mix($--color-white, $color, 60%);
                    color: $color;

                    @include hover-focus() {
                        background-color: $color;
                        border-color: $color;
                        color: $--color-white;
                    }

                    @include active() {
                        background-color: mix($--color-black, $color, $--button-active-shade-percent);
                        border-color: mix($--color-black, $color, $--button-active-shade-percent);
                        color: $--color-white;
                    }
                }

                &.is-disabled {
                    background-color: mix($--color-white, $color, 90%);
                    border-color: mix($--color-white, $color, 80%);
                    color: mix($--color-white, $color, 50%);
                }
            }
        } @else if $type==text {
            &.foxui-#{$type}-#{$name} {
                &:not(.is-disabled) {
                    border-color: transparent;
                    background: transparent;
                    padding-left: 0;
                    padding-right: 0;
                    color: $color;

                    @include hover-focus() {
                        color: mix($--color-white, $color, $--button-hover-tint-percent);
                    }

                    @include active() {
                        color: mix($--color-black, $color, $--button-active-shade-percent);
                    }
                }

                &.is-disabled {
                    border-color: transparent;
                    background: transparent;
                    padding-left: 0;
                    padding-right: 0;
                    color: mix($--color-white, $color, 50%);
                }
            }
        }
    }
}

@mixin button-size($long: 32px) {
    @each $size in(default, medium, small, mini) {
        @if $size==default {
            padding: $--button-padding-vertical $--button-padding-horizontal;
            font-size: $--button-font-size;
            border-radius: $--button-border-radius;

            &.is-long {
                padding: $--button-padding-vertical $--button-padding-horizontal + $long;
            }
        } @else if $size==medium {
            &.foxui-size-#{$size} {
                padding: $--button-medium-padding-vertical $--button-medium-padding-horizontal;
                font-size: $--button-medium-font-size;
                border-radius: $--button-medium-border-radius;

                &.is-long {
                    padding: $--button-medium-padding-vertical $--button-medium-padding-horizontal + $long;
                }

                &.foxui-shape-circle {
                    width: 36px;
                    height: 36px;
                }
            }
        } @else if $size==small {
            &.foxui-size-#{$size} {
                padding: $--button-small-padding-vertical $--button-small-padding-horizontal;
                font-size: $--button-small-font-size;
                border-radius: $--button-small-border-radius;

                &.is-long {
                    padding: $--button-small-padding-vertical $--button-small-padding-horizontal + $long;
                }

                &.foxui-shape-circle {
                    width: 32px;
                    height: 32px;
                }
            }
        } @else if $size==mini {
            &.foxui-size-#{$size} {
                padding: $--button-mini-padding-vertical $--button-mini-padding-horizontal;
                font-size: $--button-mini-font-size;
                border-radius: $--button-mini-border-radius;

                &.is-long {
                    padding: $--button-mini-padding-vertical $--button-mini-padding-horizontal + $long;
                }

                &.foxui-shape-circle {
                    width: 28px;
                    height: 28px;
                }
            }
        }
    }
}

@mixin button-shape() {
    @each $shape in(round, circle, square) {
        @if $shape==round {
            &.foxui-shape-#{$shape} {
                border-radius: $--border-radius-round;
            }
        } @else if $shape==circle {
            &.foxui-shape-#{$shape} {
                border-radius: $--border-radius-circle;
                padding: 0;
                width: 40px;
                height: 40px;
            }
        } @else if $shape==square {
            &.foxui-shape-#{$shape} {
                border-radius: $--border-radius-zero;
            }
        }
    }
}
